<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta charset="utf-8"/>
    <link rel="shortcut icon" type="image/x-icon" href="../../../images/jsmile.ico"/>
    <title>角色管理</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_763780_tdovyxg8qq9.css">
    <link rel="stylesheet" href="../../../libs/vue/theme-chalk/elementui.css">
    <link rel="stylesheet" href="../../../css/index.css">
    <script src="../../../libs/vue/vue.js"></script>
    <script src="../../../libs/jquery/jquery.mini.js"></script>
    <script src="../../../libs/vue/elementui.js"></script>
    <script src="../../../libs/layer/layer.js"></script>
    <script src="../../../javascript/kit/jsmile.js"></script>
    <script src="../../../javascript/kit/vue-ext.js"></script>
</head>
<body>
<div id="app">
    <div>
        <el-breadcrumb separator="/" style="display: inline-block;">
            <el-breadcrumb-item><a href="#" @click="goHome()">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item><a href="#">系统管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <el-form :inline="true" :model="searchRole" class="query-form">
        <el-row>
            <el-col :span="3">
                <el-form-item>
                    <el-select v-model="searchRole.enable"  clearable placeholder="全部状态" style="width: 100%;">
                        <el-option
                                v-for="item in dicts.status"
                                :key="item.dictValue"
                                :label="item.dictName"
                                :value="item.dictValue">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item>
                    <el-date-picker style="width: 100%;"
                                    v-model="searchRole.startEndDate"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd"
                                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item>
                    <el-input placeholder="角色名称/角色编码" v-model="searchRole.name" clearable class="input-with-select" style="width: 100%;">
                        <el-button slot="append" icon="el-icon-search" @click="query()"></el-button>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="4" :offset="2">
                <el-button type="primary" @click="addRole">新增角色</el-button>
            </el-col>
        </el-row>
    </el-form>

    <el-table :data="roleList"  border highlight-current-row size="small"  height="calc(100vh - 164px)" style="margin-top:10px;">
        <el-table-column prop="roleName" label="角色名称" ></el-table-column>
        <el-table-column prop="roleCode" label="角色编码" ></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160" sortable></el-table-column>
        <el-table-column prop="enable" label="状态"  sortable>
            <template slot-scope="scope">
            <el-switch :active-value=1 :inactive-value=0 @change="updateStatus(scope.row,$event)"
                    v-model="scope.row.enable">
            </el-switch>
            </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="100"></el-table-column>
        <el-table-column label="操作" width="240">
            <template slot-scope="scope">
                <el-button
                        size="mini" type="success"
                        @click="editRole(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="deleteRole(scope.$index, scope.row)">删除
                </el-button>
                <el-button
                        size="mini"
                        type="primary"
                        @click="authRole(scope.$index, scope.row)">授权
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchRole.pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="searchRole.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchRole.total">
    </el-pagination>

</div>
<script src="../../../javascript/sys/role/role.js"></script>
</body>
</html>